<template>
	<view style="flex-direction: column;">
		<u-tabs :list="list1" @click="tabClick" :current="current" @change="tabChange" lineWidth="63px"
			lineColor="#1590EF" :activeStyle="{
			    color: '#1590EF',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
		<view style="height: 2rpx;background-color: #ccc;margin-top: 10rpx;"></view>
		<!-- 企业查询 -->
		<view class="viewCon" v-if="current==0">
			<view class="inputView">
				<view class="text_label">
					<text>业户名称</text>
				</view>
				<u-input class="ipt" clearable v-model="ownername" @input="(e)=>inputSearch(e,1)"
					placeholder="请输入经营业户名称">
				</u-input>
			</view>
			<view class="inputView">
				<view class="text_label">
					<text>许可证号</text>
				</view>
				<u-input class="ipt" clearable v-model="ownernum" @input="(e)=>inputSearch(e,2)"
					placeholder="请输入经营许可证号">
				</u-input>
			</view>

			<u-picker :show="ownerShow" keyName='ownerName' @cancel="ownerCancel" @confirm="ownerConfirm"
				:columns="ownernameData">
			</u-picker>

			<u-picker :show="ownerNumShow" keyName='mcertId' @cancel="ownerNumCancel" @confirm="ownerNumConfirm"
				:columns="ownerNumData">
			</u-picker>

			<view class="btn" @click="queryClick">
				<text>查询</text>
			</view>
			<view class="btn" style="background-color:#5BB5F8 ;" @click="resetClick">
				<text>重置</text>
			</view>
		</view>
		<!-- 从业人员查询 -->
		<view class="viewCon" v-if="current==1">
			<view class="inputView">
				<view class="text_label">
					<text>姓名</text>
				</view>
				<u-input class="ipt" v-model="name" placeholder="请输入姓名" clearable></u-input>
			</view>

			<view class="inputView">
				<view class="text_label" @click="isCardClick">
					<u-image :src="!isCardId?src1:src2" width="8px" height="8px" style="margin-right: 3px;"></u-image>
					<text>资格证号</text>
				</view>
				<u-input class="ipt" v-model="licNum" placeholder="请输入资格证号" clearable></u-input>
			</view>

			<view class="inputView">
				<view class="text_label" @click="isCardClick">
					<u-image :src="isCardId?src1:src2" width="8px" height="8px" style="margin-right: 3px;"></u-image>
					<text>身份证号</text>
				</view>
				<u-input class="ipt" v-model="idCard" placeholder="请输入身份证号" clearable></u-input>
			</view>

			<view class="inputView">
				<view class="text_label">
					<!-- <text style="color: red;">*</text><text>省份</text> -->
					<text>省份</text>
				</view>
				<view class="iptview" @click="provinceClick">
					<u-input class="ipt" v-model="province" placeholder="请选择省份" suffixIcon="arrow-down" :disabled="true"
						suffixIconStyle="color: #909399" clearable></u-input>
				</view>
			</view>
			<u-picker keyName='name' :show="provinceShow" @cancel="provinceCancel" @confirm="provinceConfirm"
				:columns="provinceList">
			</u-picker>

			<view class="btn" @click="queryClick">
				<text>查询</text>
			</view>
			<view class="btn" style="background-color:#5BB5F8 ;" @click="resetClick">
				<text>重置</text>
			</view>
		</view>
		<!-- 营运车辆查询 -->
		<view class="viewCon" v-if="current==2">
			<view class="inputView" @click="handleVeh">
				<view class="text_label">
					<text>车辆号牌</text>
				</view>
				<u-input class="ipt" readonly v-model="carnum" placeholder="请输入车辆号牌" clearable></u-input>
			</view>
			<view class="inputView">
				<view class="text_label">
					<text>车牌颜色</text>
				</view>
				<view class="iptview" @click="inputColorClick">
					<u-input class="ipt" v-model="platColor" placeholder="请选择车牌颜色" suffixIcon="arrow-down"
						:disabled="true" suffixIconStyle="color: #909399" clearable></u-input>
				</view>

			</view>
			<view class="inputView">
				<view class="text_label">
					<!-- <text style="color: red;">*</text> --><text>省份</text>
				</view>
				<view class="iptview" @click="provinceClick">
					<u-input class="ipt" v-model="province" placeholder="请选择省份" suffixIcon="arrow-down" :disabled="true"
						suffixIconStyle="color: #909399" clearable></u-input>
				</view>
			</view>
			<u-picker :show="plartColorShow" @cancel="colorCancel" @confirm="colorConfirm" :columns="colorPicker">
			</u-picker>


			<u-picker keyName='name' :show="provinceShow" @cancel="provinceCancel" @confirm="provinceConfirm"
				:columns="provinceList">
			</u-picker>

			<view class="btn" @click="queryClick">
				<text>查询</text>
			</view>
			<view class="btn" style="background-color:#5BB5F8 ;" @click="resetClick">
				<text>重置</text>
			</view>
		</view>
		<!-- 罐体查询 -->

		<view class="viewCon" v-if="current==3">
			<view class="inputView" @click="handleVeh">
				<view class="text_label">
					<text>车辆号牌</text>
				</view>
				<u-input class="ipt" v-model="carnum" placeholder="请输入车辆号牌" clearable></u-input>
			</view>
			<view class="inputView">
				<view class="text_label">
					<text>车牌颜色</text>
				</view>
				<view class="iptview" @click="inputColorClick">
					<u-input class="ipt" v-model="platColor" placeholder="请选择车牌颜色" suffixIcon="arrow-down"
						:disabled="true" suffixIconStyle="color: #909399" clearable></u-input>
				</view>

			</view>
			<view class="inputView">
				<view class="text_label">
					<!-- <text style="color: red;">*</text> --><text>省份</text>
				</view>
				<view class="iptview" @click="provinceClick">
					<u-input class="ipt" v-model="province" placeholder="请选择省份" suffixIcon="arrow-down" :disabled="true"
						suffixIconStyle="color: #909399" clearable></u-input>
				</view>
			</view>
			<u-picker :show="plartColorShow" @cancel="colorCancel" @confirm="colorConfirm" :columns="colorPicker">
			</u-picker>


			<u-picker keyName='name' :show="provinceShow" @cancel="provinceCancel" @confirm="provinceConfirm"
				:columns="provinceList">
			</u-picker>

			<view class="btn" @click="queryClick">
				<text>查询</text>
			</view>
			<view class="btn" style="background-color:#5BB5F8 ;" @click="resetClick">
				<text>重置</text>
			</view>
		</view>

		<!-- 罐式集装箱查询 -->
		<view class="viewCon" v-if="current==4">
			<view class="inputView" @click="handleVeh">
				<view class="text_label">
					<text>车辆号牌</text>
				</view>
				<u-input class="ipt" v-model="carnum" placeholder="请输入车辆号牌" clearable></u-input>
			</view>
			<view class="inputView">
				<view class="text_label">
					<text>车牌颜色</text>
				</view>
				<view class="iptview" @click="inputColorClick">
					<u-input class="ipt" v-model="platColor" placeholder="请选择车牌颜色" suffixIcon="arrow-down"
						:disabled="true" suffixIconStyle="color: #909399" clearable></u-input>
				</view>

			</view>
			<view class="inputView">
				<view class="text_label">
					<!-- <text style="color: red;">*</text> --><text>省份</text>
				</view>
				<view class="iptview" @click="provinceClick">
					<u-input class="ipt" v-model="province" placeholder="请选择省份" suffixIcon="arrow-down" :disabled="true"
						suffixIconStyle="color: #909399" clearable></u-input>
				</view>
			</view>
			<u-picker :show="plartColorShow" @cancel="colorCancel" @confirm="colorConfirm" :columns="colorPicker">
			</u-picker>

			<u-picker keyName='name' :show="provinceShow" @cancel="provinceCancel" @confirm="provinceConfirm"
				:columns="provinceList">
			</u-picker>

			<view class="btn" @click="queryClick">
				<text>查询</text>
			</view>
			<view class="btn" style="background-color:#5BB5F8 ;" @click="resetClick">
				<text>重置</text>
			</view>
		</view>
		<selectTaskFy ref="selectTaskFy" @change="changeVeh" />
	</view>
</template>

<script>
	import {
		fuzzyOwner,
		ownerInfo,
		personInfo,
		vehicleInfo,
		maCode,
		tankInfo,
		queryTankContainer
	} from '@/common/api/req.js'
	import selectTaskFy from '@/components/tool-select/select-task-fy.vue'
	import * as api from '@/common/api/monitor.js'
	export default {
		components: {
			selectTaskFy
		},
		data() {
			return {
				isCardId: false,
				src1: "/static/index/radio1.png",
				src2: "/static/index/radio2.png",
				current: 0,
				ownerShow: false,
				ownerNumShow: false,
				plartColorShow: false,
				provinceShow: false,
				ownername: "", //经营业户名称
				ownernum: "", //经营许可证号
				carnum: "", //车辆号牌
				platColor: "黄色", //车牌颜色
				province: "湖北省", //所属省份
				provinceCode: "420000",
				name: "", //姓名
				licNum: "", //资格证号
				idCard: "", //身份证号
				ownerNumData: [

				],
				colorPicker: [],
				provinceList: [
					[{
							"id": 110000,
							"name": " 北京市"
						},
						{
							"id": 120000,
							"name": " 天津市"
						},
						{
							"id": 130000,
							"name": " 河北省"
						},
						{
							"id": 140000,
							"name": " 山西省"
						},
						{
							"id": 150000,
							"name": " 内蒙古自治区"
						},
						{
							"id": 210000,
							"name": " 辽宁省"
						},
						{
							"id": 220000,
							"name": " 吉林省"
						},
						{
							"id": 230000,
							"name": " 黑龙江省"
						},
						{
							"id": 310000,
							"name": " 上海市"
						},
						{
							"id": 320000,
							"name": " 江苏省"
						},
						{
							"id": 330000,
							"name": " 浙江省"
						},
						{
							"id": 340000,
							"name": " 安徽省"
						},
						{
							"id": 350000,
							"name": " 福建省"
						},
						{
							"id": 360000,
							"name": " 江西省"
						},
						{
							"id": 370000,
							"name": " 山东省"
						},
						{
							"id": 410000,
							"name": " 河南省"
						},
						{
							"id": 420000,
							"name": " 湖北省"
						},
						{
							"id": 430000,
							"name": " 湖南省"
						},
						{
							"id": 440000,
							"name": " 广东省"
						},
						{
							"id": 450000,
							"name": " 广西壮族自治区"
						},
						{
							"id": 460000,
							"name": " 海南省"
						},
						{
							"id": 500000,
							"name": " 重庆市"
						},
						{
							"id": 510000,
							"name": " 四川省"
						},
						{
							"id": 520000,
							"name": " 贵州省"
						},
						{
							"id": 530000,
							"name": " 云南省"
						},
						{
							"id": 540000,
							"name": " 西藏自治区"
						},
						{
							"id": 610000,
							"name": " 陕西省"
						},
						{
							"id": 620000,
							"name": " 甘肃省"
						},
						{
							"id": 630000,
							"name": " 青海省"
						},
						{
							"id": 640000,
							"name": " 宁夏回族自治区"
						},
						{
							"id": 650000,
							"name": " 新疆维吾尔自治区"
						},
						{
							"id": 710000,
							"name": " 台湾省"
						},
						{
							"id": 660000,
							"name": " 新疆生产建设兵团"
						}
					]
				],

				ownernameData: [

				],


				list1: [{
					name: '企业查询',
				}, {
					name: '从业人员查询',
				}, {
					name: '营运车辆查询'
				}, {
					name: '罐车罐体查询'
				}, {
					name: '罐式集装箱查询'
				}]
			};
		},

		onLoad(option) {
			this.current = option.page
		},

		mounted() {
			this.getMaCode()
		},
		methods: {
			changeVeh(res) {
				const item = res.item;
				this.carnum = item.vehicleNo;
			},
			getMaCode() {
				maCode('veh_color').then(res => {
					let list = res.data.data
					let array = list.map(item => item.dictValue)
					this.colorPicker.push(array)
				})
			},
			// 企业名称查询
			inputSearch(e, num) {
				var value = e
				// 输入框防抖
				clearTimeout(this.debounceTimer);
				// 每次进来的时候都将之前的清除掉，如果还没到毫秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过毫秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
				this.debounceTimer = setTimeout(() => {
					//输入框没值了，清空搜索框条件数据
					if (!value) {
						// 设置为初始状态
						return;
					}
					if (num == 1) {
						this.requestOwner(e)
					} else {
						this.requestmcert(e)
					}

				}, 1000)
			},

			requestOwner(ownername) {
				this.ownernameData = []
				fuzzyOwner({
					ownerName: ownername,
				}).then(res => {
					let list = res.data.data
					if (list.length > 0) {
						this.ownernameData.push(list)
						this.ownerShow = true
					}
				})
			},
			// 车牌号正则验证
			vehCodeRegex(licensePlate) {
				// 任意汉字：[\u4e00-\u9fa5]
				// 所有省份：[京沪津渝鲁冀晋蒙辽吉黑苏浙皖闽赣豫湘鄂粤桂琼川贵云藏陕甘青宁新港澳台]
				var str = `京沪津渝鲁冀晋蒙辽吉黑苏浙皖闽赣豫湘鄂粤桂琼川贵云藏陕甘青宁新港澳台`;
				var licensePlateRegex = eval(`/^[${str}][A-Z][A-Z0-9]{4,5}[A-Z0-9挂]$/`);
				if (licensePlateRegex.test(licensePlate)) {
					return true;
				} else {
					return false;
				}
			},
			// 车牌号查询
			handleVeh() {
				this.$refs.selectTaskFy.showBox({
					title: "请选择车牌号(至少输入3个字符)",
					key: this.carnum,
					getData: (key, current) => {
						return new Promise((resolve) => {
							if (key.length < 3) {
								return resolve({});
							}
							api.queryVehicle({
								current,
								size: 20,
								vehNo: key
							}).then(res => {
								const resData = res.data.data;
								if (resData.records.length == 0 && this.vehCodeRegex(key)) {
									resData.records.push({
										vehicleNo: key,
									})
								}
								resData.records.map(item => {
									item.$label = item.vehicleNo
								})
								resolve(resData);
							}).catch(res => {});
						})
					}
				});
			},

			requestmcert(e) {
				this.ownerNumData = []
				fuzzyOwner({
					mcertId: e,
				}).then(res => {
					let list = res.data.data
					if (list.length > 0) {
						this.ownerNumData.push(list)
						this.ownerShow = true
					}
				})

			},
			resetClick() {
				if (this.current == 0) {
					this.ownername = ''
					this.ownernum = ''
				} else if (this.current == 1) {
					this.name = ''
					this.licNum = ''
					this.idCard = ''
					this.province = '湖北省'
					this.provinceCode = '420000'
				} else if (this.current == 2) {
					this.carnum = ''
					this.platColor = '黄色'
					this.province = '湖北省'
					this.provinceCode = '420000'
				} else if (this.current == 3) {
					this.carnum = ''
					this.platColor = '黄色'
					this.province = '湖北省'
					this.provinceCode = '420000'
				} else if (this.current == 4) {
					this.carnum = ''
					this.platColor = '黄色'
					this.province = '湖北省'
					this.provinceCode = '420000'
				}






			},
			queryClick() {

				if (this.current == 0) {
					if (this.ownername == '') {
						uni.showToast({
							title: '经营业户名称不能为空',
							icon: "none"
						})
						return
					}
					if (this.ownernum == '') {
						uni.showToast({
							title: '经营许可证号不能为空',
							icon: "none"
						})
						return
					}

					ownerInfo({
						mcertId: this.ownernum,
						ownerName: this.ownername
					}).then(res => {
						console.log(res, '企业查询返回');
						let objData = res.data.data
						if (objData && objData.ownerName) {
							this.$goBack('../msgQuery/qyMsg?data=' + encodeURIComponent(JSON.stringify(objData)),
								2);
						} else {
							uni.showToast({
								title: '企业查询为空',
								icon: "none"
							})
						}

					})



				} else if (this.current == 1) {
					if (this.name == '') {
						uni.showToast({
							title: '姓名不能为空',
							icon: "none"
						})
						return
					}

					if (!this.isCardId) {
						if (this.licNum == '') {
							uni.showToast({
								title: '资格证号不能为空',
								icon: "none"
							})
							return
						}
					} else {
						if (this.idCard == '') {
							uni.showToast({
								title: '身份证号不能为空',
								icon: "none"
							})
							return
						}
					}




					// if (this.province == '') {
					// 	uni.showToast({
					// 		title: '请选择省份',
					// 		icon: "none"
					// 	})
					// 	return
					// }


					personInfo({
						idCard: this.idCard,
						licNum: this.licNum,
						name: this.name,
						provCode: this.provinceCode
					}).then(res => {
						console.log(res, '人员查询');
						let objData = res.data.data
						if (objData && objData.name) {
							this.$goBack('../msgQuery/psrsonQuery?data=' + encodeURIComponent(JSON.stringify(
									objData)),
								2);
						} else {
							uni.showToast({
								title: '从业人员查询为空',
								icon: "none"
							})
						}
					})





				} else if (this.current == 2) { // if (this.carnum == '') {



					if (this.carnum == '') {
						uni.showToast({
							title: '车辆号牌不能为空',
							icon: "none"
						})
						return
					}
					if (this.platColor == '') {
						uni.showToast({
							title: '请选择车牌颜色',
							icon: "none"
						})
						return
					}

					// if (this.province == '') {
					// 	uni.showToast({
					// 		title: '请选择省份',
					// 		icon: "none"
					// 	})
					// 	return
					// }

					vehicleInfo({
						provCode: this.provinceCode,
						// provCode:'420000',
						vehCode: this.carnum,
						vehColor: this.platColor
					}).then(res => {
						console.log(res, '营运车辆查询');
						let objData = res.data.data
						if (objData && objData.vehCode) {
							this.$goBack('../msgQuery/carMsg?data=' + encodeURIComponent(JSON.stringify(
									objData)),
								2);
						} else {
							uni.showToast({
								title: '营运车辆查询为空',
								icon: "none"
							})
						}
					})

				} else if (this.current == 3) {
					if (this.carnum == '') {
						uni.showToast({
							title: '车辆号牌不能为空',
							icon: "none"
						})
						return
					}
					if (this.platColor == '') {
						uni.showToast({
							title: '请选择车牌颜色',
							icon: "none"
						})
						return
					}

					// if (this.province == '') {
					// 	uni.showToast({
					// 		title: '请选择省份',
					// 		icon: "none"
					// 	})
					// 	return
					// }


					tankInfo({
						provCode: this.provinceCode,
						vehCode: this.carnum,
						vehColor: this.platColor,
					}).then(res => {
						let objData = res.data.data
						if (Object.keys(objData).length !== 0) {
							this.$goBack('../msgQuery/potMsg?data=' + encodeURIComponent(JSON.stringify(
									objData)),
								2);
						} else {
							uni.showToast({
								title: '暂无查询数据',
								icon: "none"
							})
						}
					})

					// this.$goBack('../msgQuery/potMsg', 2);
				} else if (this.current == 4) {
					if (this.carnum == '') {
						uni.showToast({
							title: '车辆号牌不能为空',
							icon: "none"
						})
						return
					}
					if (this.platColor == '') {
						uni.showToast({
							title: '请选择车牌颜色',
							icon: "none"
						})
						return
					}

					// if (this.province == '') {
					// 	uni.showToast({
					// 		title: '请选择省份',
					// 		icon: "none"
					// 	})
					// 	return
					// }
					queryTankContainer({
						provCode: this.provinceCode,
						vehCode: this.carnum,
						vehColor: this.platColor,
					}).then(res => {

						let objData = res.data.data
						if (Object.keys(objData).length !== 0) {
							this.$goBack('../msgQuery/boxMsg?data=' + encodeURIComponent(JSON.stringify(
									objData)),
								2);
						} else {
							uni.showToast({
								title: '暂无查询数据',
								icon: "none"
							})
						}
					})
					// this.$goBack('../msgQuery/boxMsg', 2);
				}
			},
			isCardClick() {
				this.isCardId = !this.isCardId
			},
			tabChange(e) {
				this.current = e.index
				this.province = '湖北省'
				this.provinceCode = '420000'
				this.carnum = ''
				this.platColor = '黄色'
			},
			tabClick() {},
			inputColorClick() {
				this.plartColorShow = true
			},
			ownerCancel() {
				this.ownerShow = false
			},
			ownerNumCancel() {
				this.ownerNumShow = false
			},
			colorCancel() {
				this.plartColorShow = false
			},
			ownerNumConfirm(e) {
				this.ownernum = e.value[0].mcertId
				this.ownername = e.value[0].ownerName
				this.ownerNumShow = false
			},
			ownerConfirm(e) {
				console.log(312,e)
				this.ownername = e.value[0].ownerName
				this.ownernum = e.value[0].mcertId
				this.ownerShow = false
			},
			colorConfirm(e) {
				this.platColor = e.value[0]
				this.plartColorShow = false
			},
			provinceClick() {
				this.provinceShow = true
			},
			provinceCancel() {
				this.provinceShow = false
			},
			provinceConfirm(e) {
				this.province = e.value[0].name
				this.provinceCode = e.value[0].id
				this.provinceShow = false
			},

		}
	}
</script>

<style lang="scss">
	.viewCon {
		padding: 30rpx;



		.inputView {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.text_label {
				width: 180rpx;
				text-align: center;
				display: flex;
				align-items: center;

				text {
					font-size: 14px;
				}
			}

			.iptview {
				flex: 1;

				.ipt {
					// margin-left: 20rpx;
					background-color: #F5F7FA;
				}
			}

			.ipt {
				background-color: #F5F7FA;
				// margin-left: 20rpx;
			}
		}

		.btn {
			width: 400rpx;
			height: 80rpx;
			background-color: #148AE4;
			margin: 0 auto;
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			text {
				font-size: 32rpx;
				color: #fff;
			}

		}
	}
</style>